<template>
	<view class="order-list">
		<u-tabs :scrollable="false" :list="list" :current="swiperCurrent" @click="tabsChange"
			:activeStyle="{color:'#3D3A3A',fontWeight:'bold',fontSize: '16px',transform: 'scale(1)'}"
			lineColor="#EA5404" ref="uTabs" tabs-item active style="background-color: #FFFFFF;" bg-color="#FFFFFF">
		</u-tabs>
		<view class='list-box' :style="'height:'+windowHeight + 'rpx'">
			<scroll-view :style="'height:'+windowHeight + 'rpx'" scroll-y="true" class="scroll-Y"
				v-if="dataList.length>0" :refresher-enabled='false' @scrolltolower="onreachBottomMore">
				<view style=" height: 100%;">
					<block v-for="(item, index) in dataList" :key="index">
						<view :data-id="item.id" :data-item="item">
							<view class="list-cell">
								<image class="img" mode="aspectFill"
									:src="item.imageTestCover||'@appstatic/img/my/appoint_img_small.png'" />
								<view class="default-button" v-if="item.testStatus=='2'">已确认</view>
								<view class="default-button-no" v-else-if="item.testStatus=='1'">已提交</view>
								<view class="default-button-no" v-else-if="item.testStatus=='3'">已完成</view>
								<view class="default-button-no" v-else-if="item.testStatus=='4'">已取消</view>
								<view class="list-content_text">


									<view>
										<view class="text-1">{{item.testModel}}
										</view>
										<view class="layout-1" v-if="item.testStoreName!=null">
											<image class="small-icon" src="@appstatic/img/my/my_order_car_icon.png" />
											<view class="text-2" style="margin-right: 10px;">
												{{item.testStoreName}}
											</view>
										</view>
										<view class="layout-1" style="margin-top: 4px;">
											<image class="small-icon"
												src="@appstatic/img/my/my_order_address_icon.png" />
											<view class="text-3" style="margin-right: 10px;">
												{{item.testCityName}}
											</view>
										</view>

									</view>



									<!-- 已提交 /已确认、-->
									<view class="layout-2" style="margin-top:8px;"
										v-if="item.testStatus=='1'||item.testStatus=='2'">
										<view class="text-cancel" @click="cancelOrder(item)">取消预约</view>
										<view class="text-detail" @click="toOrderDetail(item)">查看详情</view>
									</view>
									<!-- 已完成 -->
									<view class="layout-2" style="margin-top:8px;" v-else-if="item.testStatus=='3'">
										<view class="text-detail" @click="toOrderDetail(item)">查看详情</view>
										<view class="text-evaluate" v-if="!item.evaluateStatus"
											@click="toOrderDetailEvaluate(item)">评价</view>
									</view>
									<!-- 已取消 -->
									<view class="layout-2" style="margin-top:8px;" v-else>
										<view class="text-detail" @click="toOrderDetail(item)">查看详情</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<!--	--------------------------------------------------------------------------------------------------- -->
					<view class="noMore" v-if="pagination.loadMore == false">
						<text>没有更多数据了</text>
					</view>
				</view>

			</scroll-view>
			<view v-else class="empty">
				<!-- <image class="noOrderImg"
					src="@appstatic/img/my/my_order_no_data.png">
					<view class="noOrderText">暂无预约数据</view> -->
				<view class='img-box'>
					<image mode='widthFix' src='@appstatic/img/my/my_order_no_data.png'></image>
					<view class='text'>暂无预约数据</view>
				</view>
			</view>
		</view>
		<clxDialog :isShow='show' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :title="title">
		</clxDialog>
	</view>



</template>
<script>
	const app = getApp();
	import clxDialog from "../../../components/clx-dialog/clx-dialog";
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	export default {
		data() {
			return {
				windowHeight: 0,
				list: [{
					name: '全部',
				}, {
					name: '已提交',
				}, {
					name: '已确认'
				}, {
					name: '已完成'
				}],

				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
				type: '0',

				dataList: [],
				title: '确认取消预约试驾？',
				show: false,
				planCancelOrderId: '',
				pagination: {
					page: 1,
					totalPage: 1,
					limit: 7,
					length: 100,
					loadMore: true,
				},

			}
		},
		components: {
			clxDialog
		},
		onLoad: function(options) {

			if (options.current) {
				this.current = Number(options.current)
				this.swiperCurrent = Number(options.current)
			}
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					let clientHeight = res.windowHeight - 44;

					let clientWidth = res.windowWidth;
					let ratio = 750 / clientWidth; //计算为百分比
					let rpxHeight = ratio * clientHeight;
					that.windowHeight = rpxHeight;

				}
			})
			// this.tabsChange(0)
			that.type = "0"
			that.dataList = []
			this.loadListDrive(true, this.type)
		},
		onShow() {
			// this.loadListDrive(true, this.type)
		},
		onHide() {

		},
		methods: {

			//没有更多了
			onreachBottomMore: function() {
				if (this.pagination.loadMore) {
					//loadmore为true:底部显示loading,为false,显示"没有更多了"
					this.loadListDrive(false, this.type);
				}
			},

			clickTitle(current) {
				if (current == this.current) return
				this.current = current
			},

			//试驾列表
			loadListDrive: function(isRefresh, type) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_TESTDRIVER_LIST; //刷新页面配置
				var testStatus = ''
				if (type != '0') {
					testStatus = type
				}

				var params = {
					"pageNum": isRefresh ? 1 : that.pagination.page,
					"pageSize": that.pagination.limit,
					"testUserid": app.globalData.userInfo.id,
					"testStatus": testStatus
				};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						//课包状态
						var _list = res.data.list;
						var pagination = that.pagination;
						if (isRefresh) {
							that.dataList = _list
						} else {
							if (_list && _list.length > 0) {
								that.dataList = [...that.dataList, ..._list]
							}
						}
						var loadMore = true;
						if (this.pagination.page >= res.data.totalPage) {
							loadMore = false;
						} else {
							loadMore = true;
						}
						that.pagination.loadMore = loadMore
						that.pagination.page = that.pagination.page + 1
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			tabsChange(e) {
				this.dataList = []
				this.swiperCurrent = e.index;
				this.current = e.index;
				if (this.current == 0) {
					this.type = "0"
				}
				if (this.current == 1) {
					this.type = "1"
				}
				if (this.current == 2) {
					this.type = "2"
				}
				if (this.current == 3) {
					this.type = "3"
				}
				this.pagination.page = 1
				this.loadListDrive(true, this.type); //3:已完成 



			},

			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},

			animationfinish(e) {
				let current = e.detail.current;
				// this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			//取消预约
			cancelOrder(e) {
				this.show = true
				this.planCancelOrderId = e.id
			},
			//确定
			dialogConfirm(e) {
				this.show = false
				this.cancelOrderById(this.planCancelOrderId)
			},
			//取消
			dialogCancel() {
				this.show = false
				this.planDeleteId = ""
			},
			//通过id取消预约
			cancelOrderById: function(id) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_TESTDRIVER_CANCELTESTDRIVER;
				var params = {
					"id": id,
					"loginId": app.getUserId(),
					"cancelTime": util.dateTimeStr('y-m-d h:i:s'),
					"remark": "取消预约试驾"
				};
				network.post(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						uni.showToast({
							title: '取消试驾成功',
							duration: 3000,
							icon: 'none'
						})
						// this.loadListDrive(true, this.type); //3:已完成 
						this.refreshCancelOrderById(id)
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res, 'err')
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);

				});
			},
			//刷新取消订单id后的列表信息
			refreshCancelOrderById: function(id) {
				var that = this
				if (that.type == "0") {
					for (var i = 0; i < that.dataList.length; i++) {
						if (that.dataList[i].id == id) {
							that.dataList[i].testStatus = "4"
						}
					}
				}else{
					this.loadListDrive(true, that.type); //刷新列表
				}
			},
			//评价成功刷新列表
			orderEvaluateSuccess:function(id){
				var that = this
				for (var i = 0; i < that.dataList.length; i++) {
					if (that.dataList[i].id == id) {
						that.dataList[i].evaluateStatus = true
					}
				}
			},
			//跳转到详情
			toOrderDetail: function(e) {
				uni.navigateTo({
					url: "../appointmentDetail/appointmentDetail?id=" + e.id,
					success: res => {
						console.log("调用成功")
					},
					fail: () => {
						console.log("调用失败")
					},
					complete: () => {
						console.log("调用完成")
					}
				});
			},
			//评价跳详情
			toOrderDetailEvaluate: function(e) {
				uni.navigateTo({
					url: `/module_my/pages/orderDetail/orderEvaluate?id=${e.id}&listType=0&orderType=test&type=create`
				});
				//  uni.navigateTo({
				//  	url: "../myEvaluate/myEvaluate?id=" + e.id
				//  });
			}

		}
	}
</script>
<style>
	@import "./myAppointment.css";

	.empty {
		/* overflow: hidden;
	  position: fixed;
	  top: 0;
	  left: 0; */
		height: 100%;
		width: 100%;

	}

	.empty .img-box {
		width: 388rpx;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty .img-box image {
		width: 100%;
	}

	.empty .text {
		text-align: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #ADB0AE;
	}
</style>
